var imagenSubida;
var archivoImagen = null;
var dropzone;

$(document).ready(function () {
    $('#loaderInformacionEmpleados').show();
    enviarPeticionInformacionEmpleados();

    /*   ------------------------------
        |  FORMULARIO AÑADIR EMPLEADO  |
         ------------------------------ */

    // Oyentes de algunos de los botones de la pantalla
    $('#boton_nuevo_empleado').click(onClickBoton_nuevo_empleado);
    $('#boton_otro_nuevo_empleado').click(onClickBoton_nuevo_empleado);
    $('#boton_finalizar_nuevo_empleado').click(onClickBoton_finalizar_nuevo_empleado);
    $('#icono_cancelar_nuevo_empleado').click(onClickBoton_cancelar_nuevo_empleado);

    window.PixelAdmin.start(init);

    $('#wizard-forms .wizard-prev-step-btn').on('click', function () {
        $('#wizard-forms').pixelWizard('prevStep');
        return false;
    });

    // PASO 1: DETALLES
    $("#wizard-detalles").validate({
        ignore: '.ignore',
        focusInvalid: true,
        rules: {
            'nombre': {
                required: true,
                minlength: 2
            },
            'apellidos': {
                required: true,
                minlength: 2
            },
            'puesto': {
                required: true,
                minlength: 2
            },
            'horario': {
                required: true,
                minlength: 2
            },
        },
        messages: {
            'nombre': {
                required: 'Debe introducir el nombre del empleado',
                minlength: 'Introduzca un nombre válido'
            },
            'apellidos' : {
                required: 'Debe introducir los apellidos del empleado',
                minlength: 'Introduzca unos apellidos válidos'
            },
            'puesto' : {
                required: 'Debe introducir el puesto del empleado',
                minlength: 'Introduzca un puesto válido',
            },
            'horario' : {
                required: 'Debe introducir el horario del empleado',
                minlength: 'Introduzca un horario válido',
            }
        }
    });
    
    $('#wizard-detalles').on('submit', function () {
        if ($(this).valid()) {
            $("#subida_imagen").show();
            $('#wizard-forms').pixelWizard('nextStep');
        }
        return false;
    });

    // PASO 2: IMÁGEN
    $('#wizard-imagen').on('submit', function () {
        // Mostramos el resumen del nuevo comercio
        mostrarResumenNuevoEmpleado();

        $('#imagen_empleado_subida').empty();
        // Vemos si se ha subido imagen
        if(imagenSubida != null){
            // Colocamos la imagen que acabamos de subir
            $('#imagen_empleado_subida').append(imagenSubida);
        }else{
            // Colocamos la imagen por defecto
            $('#imagen_empleado_subida').append('<img src="assets/images/miImg/no_imagen_empleado.jpg" alt="Imagen no disponible" style="width: 100px;">');
        }

        // Enviamos el nuevo empleado al servidor para que sea añadido
        registrarNuevoEmpleadoEnServidor();

        $('#wizard-forms').pixelWizard('nextStep');

        return false;
    });

    /*   ----------------------
        |  SUBIDA DE IMÁGENES  |
         ---------------------- */

    $("#dropzonejs-example").dropzone({
        url: "../php/upload.php",
        method:'post',
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 1, // MB

        init: function () {
            // Metodo encargado de realizar las acciones pertinentes cuando se añade la imagen del producto
            this.on('addedfile', function(file){
                archivoImagen = file;
                imagenSubida = file.previewElement.querySelectorAll("[data-dz-thumbnail]")[0];

                // Creamos el botón eliminar
                var botonEliminar = Dropzone.createElement('<button class="btn btn-danger btn-flat" style="width: 100%">Eliminar</button>');
                // Creamos la instancia del dropzone
                dropzone = this;

                // Listen to the click event
                botonEliminar.addEventListener("click", function(e) {
                    // Evitamos que se haga el submit
                    e.preventDefault();
                    e.stopPropagation();

                    // Eliminamos la imagen
                    dropzone.removeFile(file);

                    archivoImagen = null;
                });

                // Añadimos el botón para que se visualice
                file.previewElement.appendChild(botonEliminar);
            });
        },

        addRemoveLinks : false,
        dictResponseError: "Can't upload file!",
        autoProcessQueue: false,
        thumbnailWidth: 500,
        thumbnailHeight: 310,

        previewTemplate: '<div class="panel" style="margin-right: -15px; margin-bottom:-15px"><br><div align="center">Vista previa de la imágen</div><div class="tl-wide text-center" style="padding: 10px;margin-top:15px;margin-bottom: 15px;background: #f1f1f1"><img data-dz-thumbnail style="width: 50%"></div></div>',

        resize: function(file) {
            var info = { srcX: 0, srcY: 0, srcWidth: file.width, srcHeight: file.height },
                srcRatio = file.width / file.height;
            if (file.height > this.options.thumbnailHeight || file.width > this.options.thumbnailWidth) {
                info.trgHeight = this.options.thumbnailHeight;
                info.trgWidth = info.trgHeight * srcRatio;
                if (info.trgWidth > this.options.thumbnailWidth) {
                    info.trgWidth = this.options.thumbnailWidth;
                    info.trgHeight = info.trgWidth / srcRatio;
                }
            } else {
                info.trgHeight = file.height;
                info.trgWidth = file.width;
            }
            return info;
        }
    });
});

  /* -----------------------
    |  ACTIVIDAD EMPLEADOS  |
     ----------------------- */

function enviarPeticionInformacionEmpleados(){
    datosEnvioPeticionInformacionEmpleados = {};
    datosEnvioPeticionInformacionEmpleados.accion = 'informacionEmpleados';
    datosEnvioPeticionInformacionEmpleados.tipoFormulario = 'informacion_empleados';
    datosEnvioPeticionInformacionEmpleados.tokenCSRF = $('#informacion_empleados_token_CSRF').val();
    // JSON.stringfy(obj) transforma un objeto a una cadena de texto
    // JSON.parse(cadena) transforma una cadena en un objeto
    // Realizamos la peticion POST con el JSON de parametro
    $.post("../php/empleados/verInformacionEmpleados.php", {datosPostInformacionEmpleados: JSON.stringify(datosEnvioPeticionInformacionEmpleados)}, callbackPeticionInformacionEmpleadosExito).fail(failPostPeticionInformacionEmpleados);
}

function callbackPeticionInformacionEmpleadosExito(data){
    $('#loaderInformacionEmpleados').hide();
    $('#contenedorEmpleados').empty();
    respuestaServidor = JSON.parse(data);
    for (var i = 0; i < respuestaServidor.empleados.length; i++) {
        empleado = respuestaServidor.empleados[i];
        crearContendorEmpleado(empleado);
    }
}

function failPostPeticionInformacionEmpleados(data){
    respuestaServidor = JSON.parse(data);
}

function crearContendorEmpleado(empleado){
    var $columnas = $('<div />')
                .addClass('col-xs-12 col-sm-6 col-md-4 col-lg-3')
                .appendTo('#contenedorEmpleados');

    var $contenedorEmpleado = $('<div />')
                .addClass('contenedor-empleado')
                .appendTo($columnas);

    var $panelFoto = $('<div />')
                .addClass('panel foto-empleado')
                .appendTo($contenedorEmpleado);

    var $imagenEmpleado;
    // Vemos si tenía o no imagen el empleado para ponerle la suya o la de por defecto
    if(empleado.imagen == 'No imagen'){
         imagenEmpleado = $('<img src="assets/images/miImg/no_imagen_empleado.jpg" alt="Imagen no disponible">');
         $panelFoto.append(imagenEmpleado);
    }else{
       imagenEmpleado = $('<img />')
                .attr('src', 'data:image/png;base64,' + empleado.imagen)
                .appendTo($panelFoto);
    } 

    var $panelTransparent = $('<div />')
                .addClass('panel panel-transparent')
                .appendTo($contenedorEmpleado);

    var $panelHeading = $('<div />')
                .addClass('panel-heading')
                .appendTo($panelTransparent);

    var $panelTitle = $('<span />')
                .addClass('panel-title')
                .text(empleado.nombre)
                .appendTo($panelHeading);

    var $panelBody = $('<div />')
                .addClass('panel-body')
                .appendTo($panelTransparent);

    var $listaInfo = $('<ul />')
                .addClass('list-group text-left')
                .html('<li class="list-group-item">' +
                            '<span class="badge badge-primary">' +
                                empleado.puesto +
                            '</span><strong>Puesto</strong>' +
                        '</li>' +
                        '<li class="list-group-item">' +
                            '<span class="badge badge-info">' +
                                empleado.horario +
                            ' <i class="fa fa-clock-o"></i></span><strong>Horario</strong>' +
                        '</li>')
                .appendTo($panelBody);

    var $botonEditar = $('<a />')
                .addClass('btn btn-success disabled')
                .html('<i class="fa fa-pencil"></i> Editar')
                .appendTo($panelBody);

    var $botonEliminar = $('<a />')
                .addClass('btn btn-danger')
                .attr('value', empleado.idEmpleado)
                .html('<i class="fa fa-times"></i> Eliminar')
                .appendTo($panelBody)
                .click(function(event) {
                    enviarPeticionEliminarEmpleado($(this).attr('value'));
                });
}

  /* ---------------------
    |  ELIMINAR EMPLEADO  |
     --------------------- */

function enviarPeticionEliminarEmpleado(idEmpleado){
    datosEnvioPeticionEliminarEmpleado = {};
    datosEnvioPeticionEliminarEmpleado.accion = 'eliminarEmpleado';
    datosEnvioPeticionEliminarEmpleado.tipoFormulario = 'informacion_empleados';
    datosEnvioPeticionEliminarEmpleado.tokenCSRF = $('#informacion_empleados_token_CSRF').val();
    datosEnvioPeticionEliminarEmpleado.idEmpleado = idEmpleado;
    // JSON.stringfy(obj) transforma un objeto a una cadena de texto
    // JSON.parse(cadena) transforma una cadena en un objeto
    // Realizamos la peticion POST con el JSON de parametro
    $.post("../php/empleados/verInformacionEmpleados.php", {datosPostInformacionEmpleados: JSON.stringify(datosEnvioPeticionEliminarEmpleado)}, callbackPeticionEliminarEmpleadoExito).fail(failPostPeticionEliminarEmpleado);
}

function callbackPeticionEliminarEmpleadoExito(data){
    // TODO Hacerlo más elegante
    location.reload();
}

function failPostPeticionEliminarEmpleado(data){
    respuestaServidor = JSON.parse(data);
}


  /* ------------------------------
    |  FORMULARIO AÑADIR EMPLEADO  |
     ------------------------------ */

// Método encargado de realizar el post para registrar un comercio en el servidor
function registrarNuevoEmpleadoEnServidor(){

    datosEnvioPeticionNuevoEmpleado = {};
    datosEnvioPeticionNuevoEmpleado.accion = 'registrarNuevoEmpleado';
    datosEnvioPeticionNuevoEmpleado.tipoFormulario = 'nuevo_empleado';
    datosEnvioPeticionNuevoEmpleado.tokenCSRF = $('#nuevo_empleado_token_CSRF').val();

    // Datos del nuevo empleado
    if(imagenSubida != null){
        datosEnvioPeticionNuevoEmpleado.imagen = imagenSubida.src;
    }else{
        datosEnvioPeticionNuevoEmpleado.imagen = 'No imagen';
    }
    datosEnvioPeticionNuevoEmpleado.nombre = $("input[name='nombre']").val();
    datosEnvioPeticionNuevoEmpleado.apellidos = $("input[name='apellidos']").val();
    datosEnvioPeticionNuevoEmpleado.puesto = $("input[name='puesto']").val();
    datosEnvioPeticionNuevoEmpleado.horario = $("input[name='horario']").val();

    $.post("../php/empleados/verInformacionEmpleados.php", {datosPostInformacionEmpleados: JSON.stringify(datosEnvioPeticionNuevoEmpleado)}, callbackPeticionNuevoEmpleadoExito).fail(failPostPeticionNuevoEmpleado);
}

function callbackPeticionNuevoEmpleadoExito(data){
    respuestaServidor = JSON.parse(data);
    // Vemos si se ha producido error
    if(respuestaServidor.Result == 'OK'){
        // Añadir empleado a la estructura
        resultado = $('<i class="fa fa-check-circle text-success text-xlg"></i>&nbsp;<span class="text-lg text-slim text-muted"> Empleado registrado correctamente</span>');
    }else{
        resultado = $('<i class="fa fa-times-circle text-danger text-xlg"></i>&nbsp;<span class="text-lg text-slim text-muted"> Error al añadir el empleado, inténtelo de nuevo más tarde</span>');
    }

    $('#mensaje-confirmacion-nuevo-empleado').empty();
    $('#mensaje-confirmacion-nuevo-empleado').append(resultado);

    enviarPeticionInformacionEmpleados();

    // Inicializamos la imagen
    imagenSubida = null;
}

function failPostPeticionNuevoEmpleado(data){
    respuestaServidor = JSON.parse(data);
    // Inicializamos la imagen
    imagenSubida = null;
}


// Método encargado de mostrar el resumen del comercio que se acaba de añadir
function mostrarResumenNuevoEmpleado(){
    $("input[name='nombreResumen']").val($("input[name='nombre']").val());
    $("input[name='apellidosResumen']").val($("input[name='apellidos']").val());
    $("input[name='puestoResumen']").val($("input[name='puesto']").val());
    $("input[name='horarioResumen']").val($("input[name='horario']").val());
}

/****************************************** ON CLICK BOTONES *************************************/

function onClickBoton_nuevo_empleado() {
    event.preventDefault();
    reiniciar_campos_nuevo_empleado();
    $("#formulario_nuevo_empleado").show();
    $('#wizard-forms').pixelWizard('setCurrentStep', 1);
}

function reiniciar_campos_nuevo_empleado() {
    $("input[name='nombre']").val("");
    $("input[name='apellidos']").val("");
    $("input[name='puesto']").val("");
    $("input[name='horario']").val("");
    if(archivoImagen != null && dropzone != null){
        dropzone.removeFile(archivoImagen);
        archivoImagen = null;
    }
}

function onClickBoton_finalizar_nuevo_empleado() {
    event.preventDefault();
    $("#formulario_nuevo_empleado").hide();
    $('#wizard-forms').pixelWizard('setCurrentStep', 1);
}

function onClickBoton_cancelar_nuevo_empleado() {
    event.preventDefault();
    reiniciar_campos_nuevo_empleado();
    $("#formulario_nuevo_empleado").hide();
    $('#wizard-forms').pixelWizard('setCurrentStep', 1);
}
